<template>
	<view class="container">
		<view class="action-buttons">
			<input v-model="moRenClass" @blur="search" :class="inputClass" placeholder="班级名" />
		</view>
		<!-- ECharts折线图 -->
		<view style="width:750rpx; height:750rpx">
			<!-- ECharts折线图积分 -->
			<l-echart ref="chartRef" @finished="init" />
		</view>

		<view style="width:750rpx; height:750rpx">
			<!-- ECharts折线图平均分 -->
			<l-echart ref="chartRefAvg" @finished="initAVG" />
		</view>

		<!-- 表格展示 -->
		<uni-table ref="table" border stripe emptyText="暂无更多数据">
			<uni-tr>
				<uni-th width="50" align="center">班级</uni-th>
				<uni-th width="50" align="center">积分</uni-th>
				<uni-th width="50" align="center">平均分</uni-th>
				<uni-th width="50" align="center">周数</uni-th>
			</uni-tr>
			<uni-tr v-for="(student, index) in students" :key="index">
				<uni-td align="center">{{ student.className }}</uni-td>
				<uni-td align="center">{{ student.totalPoints }}</uni-td>
				<uni-td align="center">{{ student.averageScore }}</uni-td>
				<uni-td align="center">{{ student.week }}</uni-td>
			</uni-tr>
		</uni-table>
	</view>
</template>
<script>
	import * as echarts from '@/uni_modules/lime-echart/static/echarts.min'
	export default {
		data() {
			return {
				keyword: '',
				moRenClass: uni.getStorageSync('默认班级') || '718', // 从缓存中读取默认班级
				students: [], // 学生列表
				inputClass: 'default-input', // 默认样式类
			};
		},
		onLoad() {
			this.weeks = uni.getStorageSync('周数');
			this.getData();
		},
		methods: {
			async initAVG() {
				// chart 图表实例不能存在data里
				const chart = await this.$refs.chartRefAvg.init(echarts);
				// chart.setOption(this.option)

				// 提取横坐标数据（week）和纵坐标数据（totalPoints）
				const xAxisData = this.students.map(item => item.week); // 获取所有周数作为横坐标
				const scoreData = this.students.map(item => item.averageScore); // 获取所有总积分作为纵坐标

				// 配置图表
				const option = {
					title: {
						text: '平均分变化',
						left: 'center'
					},
					tooltip: {
						trigger: 'axis'
					},
					xAxis: {
						type: 'category',
						data: xAxisData
					},
					yAxis: {
						type: 'value',
						name: '分数'
					},
					series: [{
						data: scoreData,
						type: 'line',
						// smooth: true,//曲线
						lineStyle: {
							color: '#5470C6'
						},
						itemStyle: {
							color: '#5470C6'
						}
					}]
				};

				chart.setOption(option)
			},
			async init() {
				// chart 图表实例不能存在data里
				const chart = await this.$refs.chartRef.init(echarts);
				// chart.setOption(this.option)

				// 提取横坐标数据（week）和纵坐标数据（totalPoints）
				const xAxisData = this.students.map(item => item.week); // 获取所有周数作为横坐标
				const scoreData = this.students.map(item => item.totalPoints); // 获取所有总积分作为纵坐标

				// 配置图表
				const option = {
					title: {
						text: '积分变化',
						left: 'center'
					},
					tooltip: {
						trigger: 'axis'
					},
					xAxis: {
						type: 'category',
						data: xAxisData
					},
					yAxis: {
						type: 'value',
						name: '分数'
					},
					series: [{
						data: scoreData,
						type: 'line',
						// smooth: true,//曲线
						lineStyle: {
							color: '#5470C6'
						},
						itemStyle: {
							color: '#5470C6'
						}
					}]
				};

				chart.setOption(option)
			},
			// 搜索方法
			search() {
				console.log('搜索方法执行', this.moRenClass);
				uni.setStorageSync('默认班级', this.moRenClass); // 存储到本地缓存
				// 在这里可以执行你自己的搜索逻辑
				this.getData();
				this.initAVG();
				this.init()
			},
			// 获取数据
			getData() {
				this.$dbUtils.selectDataList('testDb', 'scoreChart', {
						'className': this.moRenClass
					})
					.then(results => {
						console.log("查询成功:", results);
						// 在这里处理查询结果
						this.students = results
					})
					.catch(error => {
						console.error("查询失败:", error);
					});
			},
			// 获取单个数据
		}
	};
</script>
<style scoped>
	/* 默认输入框样式 */
	.default-input {
		padding: 10px;
		border: 1px solid #ccc;
		border-radius: 4px;
		width: 100%;
		font-size: 14px;
	}

	/* 聚焦时的输入框样式 */
	.default-input:focus {
		border-color: #66afe9;
		outline: none;
		box-shadow: 0 0 8px rgba(102, 175, 233, 0.6);
	}

	/* 鼠标悬停时输入框样式 */
	.default-input:hover {
		border-color: #888;
	}

	.container {
		padding: 20rpx;
	}

	.action-buttons {
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		display: flex;
		flex-direction: row;
		/* 默认是row，可省略 */
		justify-content: space-between;
		/* 根据需要调整对齐方式 */
		gap: 10px;
		/* 按钮之间的间距 */
	}

	.student-table {
		margin-top: 20rpx;
	}

	.form-content {
		padding: 20rpx;
	}

	.delete-content {
		text-align: center;
		padding: 20rpx;
	}

	.uni-group {
		display: flex;
		align-items: center;
	}

	.u-page {
		padding: 0;
	}

	.u-cell-icon {
		width: 36rpx;
		height: 36rpx;
		margin-right: 8rpx;
	}

	.u-cell-group__title__text {
		font-weight: bold;
	}
</style>